<template>
	<view style="width: 100%; height: 500px; ">
		 <u--form :model="addaddresslist" ref="addaddressform"  class="demo-ruleForm" style="margin-top:48px;">
			<u-row>
				<u-col span=3><p style="float: left; line-height: 40px;margin-left: 10px;">收货人：</p></u-col>
				<u-col span=9> 
				<u--input
				style="width: 250px;  "
			    placeholder="请输入姓名"
			    border="surround"
			    v-model="addaddresslist.consigneeName"
				></u--input>
				</u-col>
			</u-row>
			<u-divider text=""></u-divider>
			<u-row>
				<u-col span=3><p style="float: left; line-height: 40px;margin-left: 10px;">联系电话：</p></u-col>
				<u-col span=9> <u--input
				style="width: 250px;  "
			    placeholder="手机或固话（需加区号）"
			    border="surround"
			    v-model="addaddresslist.clientPhone"
				></u--input></u-col>
			</u-row> 
			<u-divider text=""></u-divider>
			
			<u-row>
				<u-col span=3><p style="float: left; line-height: 40px;margin-left: 10px;">选择城市：</p></u-col>
				<u-col span=9>
					<view @click="show = true">
					<u--input
					disabled
					 v-model="addaddresslist.bb"
					placeholder="请选择您的收货城市"
					style="width: 250px;"
					ref="uPicker"
				></u--input>
					</view>
					<u-picker keyName="name" :show="show"  :columns="columns" @confirm="confirm" @cancel="pickerCancel" @change="changeHandler"></u-picker></u-col>
			</u-row> 
			<u-divider text=""></u-divider>
			<u-row>
				<u-col span=3><p style="float: left; line-height: 40px;margin-left: 10px;">详细地址：</p></u-col>
				<u-col span=9> <u--input
				style="width: 250px;  "
			    placeholder="请输入您的详细地址（门牌号）"
			    border="surround"
			    v-model="addaddresslist.detailedAddress"
				></u--input></u-col>
			</u-row> 
			<u-divider text=""></u-divider>
			<u-row>
				<u-col span=3><p style="float: left; line-height: 40px;margin-left: 10px;">地址类型：</p></u-col>
				<u-col span=9>
					<view @click="sjow = true">
					<u--input
					disabled
					 v-model="addaddresslist.regionType"
					placeholder="请选择地址类型"
					style="width: 250px;"
					ref="columnsys"
				></u--input>
					</view>
					<u-picker  :show="sjow" :columns="columnsys"  @confirm="confirmm"></u-picker></u-col>
			</u-row> 
			 <u-button class ="que" type="primary"  shape="circle" :plain="true"  @click="addForm('addaddressform')" style="width: 150px;margin-top: 50px; height: 45px;">添加收货地址</u-button>
			 </u--form> 
			 
	</view>
</template>

<script>
		import areaList from '../../../util/address-data.js'
		console.log(areaList.list)
	export default {
		data() {
			return {
					show: false,
					sjow: false,
					columnsys:[
							['学校', '家','公司'],
					],
							columns: [
											[],
											[],
											[]
										],
						columnData: [
							['深圳', '厦门', '上海', '拉萨'],
							['得州', '华盛顿', '纽约', '阿拉斯加']
						],
					addaddresslist:{
							id:"",
							consigneeName:'', //收货人姓名
							clientPhone:'', //电话号
							clientEconomize:'', //省市县
							detailedaddress:'', //详细地址
							regionType:'', // 地区类型 0家 1 公司 2学校
							bb:''
					},
			}
		},
        onLoad(){
          var userId = uni.getStorageSync("loginId")
          if(userId){
              this.addaddresslist.userId = userId
          }  
        },
			created() {
				console.log(areaList)
					this.columns[0] = areaList.list;
					this.columns[1] = areaList.list[0].cities;
					this.columns[2] = areaList.list[0].cities[0].districts;
			},
	computed: {
				getAddressText() {
					return () => this.userAddress.province + '  ' + this.userAddress.city + '  ' + this.userAddress.area;
				}
		},
		methods: {
			addForm(){
                var that = this
				uni.request({
						url: "http://"+that.$host+":"+that.$port+"/address/addressAdd",          
						method: 'POST',
						data: this.addaddresslist,
						dataType: 'json',
						success: (res) => {
							if(res.data.flag){
						uni.showToast({ //添加成功提示
								 icon: 'success',
								 title: '发布成功',
								 // 显示时长时间为1000秒
								 duration: 1000
								})
                                var pages = getCurrentPages(); // 当前页面
                                var beforePage = pages[1]; 
                                // console.log(pages)
								setTimeout(function () { 
									uni.navigateBack({
                                        data:1,
                                        success() {
                                            beforePage.$vm.getDefaultAdd();
                                        }
                                        })// 定时任务
								},1000) 
							}
						},
						});
			},
				pickerCancel() {
							//隐藏联动展示框
							this.addressShow = false;
							//重置联动数据为初始状态
							this.$refs.uPicker.setIndexs([0, 0, 0], true);
							this.$refs.uPicker.setColumnValues(0, areaList.list);
							this.$refs.uPicker.setColumnValues(1, areaList.list[0].cities);
							this.$refs.uPicker.setColumnValues(2, areaList.list[0].cities[0].districts);
						},
					//三级联动框滑动选择后触发的事件
					changeHandler(e) {
							const {
								columnIndex,
								value,
								values, // values为当前变化列的数组内容
								index,
								indexs,
								// 微信小程序无法将picker实例传出来，只能通过ref操作
								picker = this.$refs.uPicker
							} = e
							// 当第一列值发生变化时，变化第二列(后一列)对应的选项
							if (columnIndex === 0) {
								// picker为选择器this实例，变化第二列对应的选项
								picker.setColumnValues(1, areaList.list[index].cities)
								picker.setColumnValues(2, areaList.list[indexs[0]].cities[0].districts)
							} else if (columnIndex === 1) {
								// picker为选择器this实例，变化第三列对应的选项
								picker.setColumnValues(2, areaList.list[indexs[0]].cities[indexs[1]].districts)
							}
					},
		
						// 回调参数为包含columnIndex、value、values
						confirm(e) {
			                console.log('confirm', e)
							this.addaddresslist.clientEconomize=e.value[0].name
							this.addaddresslist.clientCity=e.value[1].name
							this.addaddresslist.clientCounty=e.value[2].name
							this.addaddresslist.bb = this.addaddresslist.clientEconomize+this.addaddresslist.clientCity+this.addaddresslist.clientCounty
			                this.show = false
						},
						confirmm(e) {
							var a = e.value[0]
						    console.log('confirm', e)
							 this.addaddresslist.regionType=e.value[0]
							  this.sjow = false
							if(a == "家"){
                                this.addaddresslist.regionType = 0
                            }else if (a =="公司"){
                                this.addaddresslist.regionType = 1
                            }else{
                                this.addaddresslist.regionType = 2
                            }
						   
						}
		}
	}
</script>

<style>

</style>
